<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { highSeas, CrewhallCollect } from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      tableData: [],
      bootTags: [],
      bookLeaveArr: [
        { label: "全部", value: "" },
        { label: "甲一", value: "1" },
        { label: "甲二", value: "2" },
        { label: "丙一", value: "3" },
        { label: "丙二", value: "4" },
      ],
      bootTypeArr: [],
      positionNameArr: [],
      bootStatusArr: [],
      bootTagsArr: [],
      queryData: {
        real_name: "",
        zs: "",
        cblx: "",
        zw: "",
        cy_label: "",
        cy_status: "",
        jg: "",
        remark: "",
        page: 1,
        per_page: 10,
      },
      total: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    resetFn() {
      this.queryData = {
        real_name: "",
        zs: "",
        cblx: "",
        zw: "",
        cy_label: "",
        cy_status: "",
        jg: "",
        remark: "",
        page: 1,
        per_page: 10,
      };
      this.getData();
    },
    collectFn(row) {
      ElMessageBox.confirm("确定收藏选择的船员简历吗?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const { data } = await CrewhallCollect({
          biographical_notes_id: row.biographical_notes_id,
        });
        if (data.code == 1) {
          ElMessage({
            type: "success",
            message: "收藏成功",
          });
          this.getData();
        }
      });
    },
    detailFn(id) {
      this.$router.push({
        path: "/salaPublicDetail",
        query: { id: id, page: this.queryData.page },
      });
    },
    async getData() {
      const { data } = await highSeas(this.queryData);
      if (data.code == 1) {
        let arr = data.data.data;
        for (let item of arr) {
          item["visibleTags"] = false;
          item["tags"] = item.cy_label ? item.cy_label.split(",") : [];
          item["cy_tags"] = item.label_data ? item.label_data.split(",") : [];
          item["all_tags"] = Array.from(
            new Set(item.tags.concat(item.cy_tags))
          );
        }
        console.log(arr);
        this.tableData = arr;
        this.total = data.data.total;
      }
    },
  },
  mounted() {},
  async created() {
    this.queryData.page = Number(localStorage.getItem("boot_page")) || 1;
    this.getData();
    this.bootTags = await this.$getCate.getCateFn(5);
    let bootTypeArr = await this.$getCate.getCateFn(1);
    this.bootTypeArr = bootTypeArr.map((item) => {
      return { label: item.name, value: item.name };
    });
    let positionNameArr = await this.$getCate.getCateFn(3);
    this.positionNameArr = positionNameArr.map((item) => {
      return { label: item.name, value: item.name };
    });
    let bootStatusArr = await this.$getCate.getCateFn(6);
    this.bootStatusArr = bootStatusArr.map((item) => {
      return { label: item.name, value: item.name };
    });
    let bootTagsArr = [...this.bootTags];
    this.bootTagsArr = bootTagsArr.map((item) => {
      return { label: item.name, value: item.name };
    });
  },
};
</script>
<template>
  <outMain>
    <div class="tableCont">
      <div class="tableName flexCont">
        <div>公海池船员简历（{{ total }}）</div>
      </div>
      <div class="tableSerch">
        <div class="serchLeft"></div>
        <div class="serchRight">
          <el-form class="flexCenter hasBottom" :inline="true">
            <el-form-item>
              <el-input
                @clear="getData"
                @keyup.enter="getData"
                clearable
                v-model="queryData.real_name"
                placeholder="请输入船员姓名"
              />
            </el-form-item>
            <el-form-item>
              <el-select
                @change="getData"
                v-model="queryData.zs"
                clearable
                placeholder="请选择证书等级"
              >
                <el-option
                  v-for="item in bookLeaveArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                @change="getData"
                v-model="queryData.cblx"
                clearable
                placeholder="请选择船舶类型"
              >
                <el-option
                  v-for="item in bootTypeArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="queryData.zw"
                clearable
                @change="getData"
                placeholder="请选择职务"
              >
                <el-option
                  v-for="item in positionNameArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="queryData.cy_status"
                clearable
                @change="getData"
                placeholder="请选择船员状态"
              >
                <el-option
                  v-for="item in bootStatusArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="queryData.cy_label"
                clearable
                @change="getData"
                placeholder="请选择标签"
              >
                <el-option
                  v-for="item in bootTagsArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-input
                clearable
                @clear="getData"
                @keyup.enter="getData"
                v-model="queryData.remark"
                placeholder="请输入备注"
              />
            </el-form-item>
            <btn value="搜索" @ok="getData"></btn>
            <btnPlain
              value="重置"
              style="margin-left: 15px"
              @ok="resetFn"
            ></btnPlain>
          </el-form>
        </div>
      </div>
      <el-table class="tableMain" :data="tableData" stripe style="width: 100%">
        <el-table-column show-overflow-tooltip label="简历来源">
          <template #default="{ row }">
            <el-tag v-if="row.type == 1">小程序</el-tag>
            <el-tag type="warning" v-if="row.type == 3">爬虫</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="real_name" show-overflow-tooltip label="姓名" />
        <el-table-column show-overflow-tooltip label="年龄">
          <template #default="{ row }"> {{ row.age }}岁 </template>
        </el-table-column>
        <el-table-column
          prop="zw"
          width="150"
          show-overflow-tooltip
          label="职务名称"
        />
        <el-table-column prop="zs" show-overflow-tooltip label="证书等级" />
        <el-table-column prop="cblx" show-overflow-tooltip label="船舶类型" />
        <el-table-column show-overflow-tooltip label="工作经验">
          <template #default="{ row }">
            <div v-if="row.gzjy">
              {{ row.gzjy }}<span v-if="row.type != 3">年</span>
            </div>
            <div v-if="!row.gzjy">- -</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="期望月薪">
          <template #default="{ row }">
            <div v-if="row.type != 3">
              <div v-if="row.qwyx && row.qwyx != '0'">
                {{ row.qwyx_dw == 1 ? "¥" : "$" }}{{ row.qwyx }}
              </div>
              <div v-else>- -</div>
            </div>
            <div v-if="row.type == 3">
              <div>{{ row.qwyx }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="cy_status"
          show-overflow-tooltip
          label="船员状态"
        />
        <el-table-column label="船员标签">
          <template #default="{ row }">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="row.all_tags.join(',')"
              placement="top-start"
            >
              <el-tag class="pointText" v-if="row.all_tags.length > 0"
                >{{ row.all_tags.length }}个标签</el-tag
              >
            </el-tooltip>
            <el-tag v-if="row.all_tags.length == 0">暂无标签</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="bootTalks"
          show-overflow-tooltip
          label="状态沟通"
          width="100"
        >
          <template #default="{ row }">
            <el-tag type="info" v-if="row.gt_count == 0">未沟通</el-tag>
            <el-tag v-else>{{ row.gt_count }}次沟通</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="Name" width="100" label="操作">
          <template #default="{ row }">
            <div class="tableCtrl">
              <div
                class="greenText ctrlText"
                @click="detailFn(row.biographical_notes_id)"
              >
                详情
              </div>
              <div
                class="blueText ctrlText"
                v-if="row.is_collect === 1"
                @click="collectFn(row)"
              >
                收藏
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageCont">
        <el-pagination
          v-model:currentPage="queryData.page"
          v-model:page-size="queryData.per_page"
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          @size-change="getData"
          @current-change="getData"
        />
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
